<template>
  <div class="starItem">
    <div class="dataShow">
      <div class="dataTitle">
        <span>{{title}}</span>
      </div>
      <div class="table-wrap">
        <el-table :data="dataItems" style="width: 100%;">
          <el-table-column
            v-for="item in infoArray"
            :key="item.key"
            prop="label"
            :label="item.label"
            width="180"
          >
            <template slot-scope="{ row }">
              <el-rate
                v-model="row[item.key]"
                disabled
                text-color="#ff9900"
                v-if="item.key==='kpi1'|| item.key==='kpi2' || item.key==='kpi3' || item.key === 'kpi4'"
              ></el-rate>
              <div v-else>{{ row[item.key] }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="dataBody">
        <div class="dataBodyItem" v-for="item in infoArray" :key="item.key" >
          <label>{{ item.label }}</label>
          <i class="iconfont iconchebaomu_huaban1fuben12" v-if="item.key==='img'"></i>
          <el-rate
            v-model="dataItems[0][item.key]" disabled  text-color="#ff9900"
            v-if="item.key==='quality'|| item.key==='attitude' || item.key==='standard'"
          ></el-rate>
          <div v-else>{{ dataItems[0][item.key] }}</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'starItem',
  components: {},
  props: {
    dataItems: Array,
    infoArray: Array,
    title: String
  },
  data () {
    return {
      showHeader: false
    }
  },
  computed: {},
  watch: {},
  methods: {}
}
</script>

<style scoped lang="scss">
.starItem {
  margin: 50px 10px;
  border-bottom: 1px solid #ededed;

  img {
    width: 50px;
    height: 50px;
  }

  .dataTitle {
    text-align: left;

    span {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .table-wrap {
    width: 100%;
    margin-top: 20px;
  }
}
</style>
